<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        div{
            width: 750px;
            margin: 0 auto;
        }
        ul{
            display: flex;
        }
        ul > li{
            width: 70px;
            height: 250px;
            overflow: hidden;
            transition: width .2s linear;
        }
        img{
            display: block;
            width: 400px;
            height: 250px;
        }
        ol{
            display: flex;
        }
        ol > li{
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: black;
        }
        ol > li:first-child{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--1.获取标签对象
        2.获取图片路径前缀，
        3.声明空字符串、循环创建li标签、同时渲染出li的样式
        4.将创建的 li 添加给 ul
        5.给第一个li设置初始样式，显示完整图片
        6·循环得到li标签
        6.1.添加一个自定义属性1lis[i].ind = i;这样只要可以获取一个标签 就可以获取这个标签的索引值
        6.2.给li添加点击事件
        6.2.1.使用排他思想; 先给li的标签都设置取消特殊样式
        先取消所有小方块的特殊样式(小方块的数量索引值与li带图的是一样的,所以可以使用同一个循环
        6.2.2.取消li和olli的特殊样式
        6.3.根据获取的索引值找到相对应位置的小方块的li设置特殊样式，ollis[this.aaa]
        6.4.给当前标签添加特殊样式
    -->
    <script>
        var ul = document.querySelector('ul')
        var str = "https://www.jq22.com/demo/jquerylbqh201910210040/images/0";
        var str1 = "";
        for(var i = 1;i <= 6;i++){
            var url = str + i + ".png"
            str1 += `<li>
                    <img src="${url}" alt="tu">
                </li>`
        }
        console.log(str1);        
        ul.innerHTML = str1;
        
        var lis = document.querySelectorAll("ul > li");
        var ollis = document.querySelectorAll("ol > li");
        lis[0].style.width = "400px";
        for(var i = 0;i < lis.length;i++){
            // console.log(i); //0-5
            lis[i].ind = i; //lis[0].aaa = 0; lis[1].aaa = 1; lis[2].aaa = 2;...
            
            lis[i].onclick = function(){
                // console.log(i); //6
                for(var k = 0;k < lis.length;k++){
                    lis[k].style.width = "70px";
                    ollis[k].style.backgroundColor = "black";
                }
                // console.log(this.ind); 
                ollis[this.ind].style.backgroundColor = "pink";
                this.style.width = "400px";                
            }
        }
    </script>
</body>
</html>